<template>
  <div class="admin-pages">
    <h1>Element Ui theme</h1>

    <el-table
      :data="showData"
      style="width: 70vw"
      :row-class-name="tableRowClassName"
      height="60vh"
    >
      <el-table-column prop="id" label="id" width="280"> </el-table-column>
      <el-table-column prop="firstName" label="name" width="280">
      </el-table-column>
      <el-table-column prop="email" label="email" width="280"></el-table-column>
      <el-table-column
        prop="authorities[0]"
        label="role"
        width="180"
      ></el-table-column>
      <el-table-column prop="createdDate" label="createdDate" width="280">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页的组件 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="64"
      >
      </el-pagination>
    </div>

    <!-- 抽屉 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      showData: [],
      // 当前页
      currentPage4: 1,
      everySize: 10,
      // 抽屉
         drawer: true,
        direction: 'rtl',
        information:{}
    };
  },
  //方法集合
  methods: {
    //   表格渲染不同颜色
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    // 点击事件 -查看
    handleClick(row) {
      console.log(row);
      this.information=row;
    },
    // 分页大小触发得相关事件
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.everySize = val;
      // console.log(  this.everySize,"----3333");
      this.rq
        .get(
          `/api/adminUsers?page=${this.currentPage4}&pageSize=${this.everySize}&size=${this.everySize}`,
          {}
        )
        .then((res) => {
          this.showData = res.data.content;
        });
    },
    // 分页
    handleCurrentChange(val) {
      console.log(val, "当前页");
      this.currentPage4 = val;
      this.rq
        .get(
          `/api/adminUsers?page=${this.currentPage4 - 1}&pageSize=${
            this.everySize
          }&size=${this.everySize}`,
          {}
        )
        .then((res) => {
          this.showData = res.data.content;
        });
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.rq.get(`/api/adminUsers?page=0&pageSize=5&size=5`, {}).then((res) => {
      // console.log(res.data.data["parkingTransactions"], "回来的数据");
      // 总共64条
      console.log(res.data.content, "管理员数据");
      this.showData = res.data.content;
    });
  },
};
</script>
<style lang="less" scoped >
.admin-pages {
  // border: 1px solid #409eff;
}
</style>